{% extends "base.html" %}
{% load static from staticfiles %}
{% block css %}
<link rel="stylesheet" type="text/css" media="all" href="{%static "css/base.css" %}" />
<link rel="stylesheet" type="text/css" media="all" href="{%static "jquery-ui-1.10.3/themes/base/jquery-ui.css" %}" />

{% endblock %}

{% block javascriptload %}
<script>
	/*open_phone_client_dialog() {
	 $("#div_phone_client").show();
	 $("#div_phone_client").dialog({
	 title : 'Numeros de telephone',
	 resizable : false,
	 height : 'auto',
	 width : 'auto',
	 modal : true
	 });
	 }*/

	$('#create').button({
		text : true,
	}).click(function() {
		//open_phone_client_dialog()
	});

	//Creation de l'accordeon
	$(function() {
		$("#accordion").accordion();
	});

	//Création de button
	$(function() {
		$("b,.vider").button().click(function(event) {
			event.preventDefault();
		});
	});

	//Auto completion

	$(function() {
		$("#tags").autocomplete({
			source : "/autocompletion_poudre",
			minLength : 1,
			autoFocus : true,
		});
	});
	////////////////////////////
	
	function showdetails(exp) {
			//exp = $("#exp")
			chercher(exp)
			$(".toggler_liste_poudres").hide();
			$(".toggler_search").hide();
			$(".toggler_agenda_poudre").hide();
			$(".toggler_create_poudre").hide()
			
			var selectedEffect = "slide";
			// most effect types need no options passed by default
			var options = {};
			// some effects have required parameters
			if (selectedEffect === "scale") {
				options = {
					percent : 0
				};
			} else if (selectedEffect === "transfer") {
				options = {
					to : "#button",
					className : "ui-effects-transfer"
				};
			} else if (selectedEffect === "size") {
				options = {
					to : {
						width : 200,
						height : 60
					}
				};
			}
			// run the effect
			$(".toggler_agenda_poudre").effect(selectedEffect, options, 500);
		}

	function chercher(e) {
		var lien = "/search_poudre?term="+e.replace(/ /g, '_')
		$.getJSON(lien, function(data) {
			//$("#user_list").empty();
			$("#tab_agenda").empty()
			html = "";
			for (var i = 0; i < data.length; i++) {
				var row = (i % 2)
				html += "<tr" + " class =row" + row + ">" + "<th>" + data[i][0] + "</th>" + "<th>" + data[i][1] + "</th>" + "<th>" + data[i][2] + "</th>" + "<th>" + data[i][3] + "</th>" + "</tr>"

			}
			$("#poudre").empty()
			$("#poudre").append($("#tags").val())
			$("#tab_agenda").append(html)
		});
	}
	
	////////////////////////////////////////////////////////
	$(function() {
		function hideall() {
			$(".toggler_liste_poudres").hide();
			$(".toggler_search").hide();
			$(".toggler_agenda_poudre").hide();
			$(".toggler_create_poudre").hide()
		}
		// run the currently selected effect
		function runEffect(cequilfaut) {
			// get effect type from
			var selectedEffect = "slide";
			// most effect types need no options passed by default
			var options = {};
			// some effects have required parameters
			if (selectedEffect === "scale") {
				options = {
					percent : 0
				};
			} else if (selectedEffect === "transfer") {
				options = {
					to : "#button",
					className : "ui-effects-transfer"
				};
			} else if (selectedEffect === "size") {
				options = {
					to : {
						width : 200,
						height : 60
					}
				};
			}
			// run the effect
			$(cequilfaut).effect(selectedEffect, options, 500);
		};
		$("#search_button").click(function(e) {
			//chercher()
			hideall()
			e.preventDefault()
			runEffect(".toggler_search");
			return false;
		});
		$("#liste_button").click(function(e) {
			hideall()
			e.preventDefault()
			runEffect(".toggler_liste_poudres");
			return false;
		});
		$("#button").click(function(e) {
			exp = $("#tags").val()
			chercher(exp)
			hideall()
			e.preventDefault()
			runEffect(".toggler_agenda_poudre")
			return false;
		});
		$("#search_button").click(function(e) {
			//chercher()
			hideall()
			e.preventDefault()
			runEffect(".toggler_search");
			return false;
		});
		
		$("#create").click(function(e) {
			//chercher()
			hideall()
			e.preventDefault()
			runEffect(".toggler_create_poudre");
			return false;
		});
		/*$("#details").click(
			function showdetails(exp) {
			//exp = $("#exp")
			chercher(exp)
			hideall()
			e.preventDefault()
			runEffect(".toggler_agenda_poudre");
			return false;
		}//);*/

		$(".toggler_liste_poudres").hide();
		$(".toggler_search").hide();
		$(".toggler_agenda_poudre").hide();
		$(".toggler_create_poudre").hide()
	});
	// set effect from select menu value

</script>
<script>
	$(function() {
		$("#menu").menu();
	}); 
</script>
<style>
	.ui-menu {}
</style>
<script>
	$(function() {
		$("#datepicker").datepicker();
	}); 
</script>
{% endblock %}

{% block menu %}
<ul id="menu">
	<li><a id ="liste_button">Liste bột đã nhập</a></li>
	<li><a id ="search_button">Tìm bột</a></li>
</ul>
<img src="{% static "bouton/addP.png" %}" id="create" />
{% endblock %}

{% block content %}

<!--div id="accordion"-->
<div class="toggler_search">
	<div id="effect" class="ui-widget-content ui-corner-all">
		<h3 class="ui-widget-header ui-corner-all">Tìm kiếm bột:</h3>
		<p id="contenu_du_toggler">
			<div style="text-align: center;">
			<div class="ui-widget">
				<label for="tags"><h3>Nhập tên bột: </h3></label>
				<input id="tags"/>
				<a href="#" id="button" class="ui-state-default ui-corner-all">Valider</a>
			</div>
			</div>
		</p>
	</div>
</div>

<div class="toggler_agenda_poudre">
	<div id="effect" class="ui-widget-content ui-corner-all">
		<h3 class="ui-widget-header ui-corner-all" id="poudre"></h3>
		<p id="contenu_du_toggler">
			<table style="width: 100%; padding: 5px;"  class="tabcenter">
				<thead class="ui-widget-header" id="tab_agenda"></thead>
				<tbody>
			</table>
		</p>
	</div>
</div>

<div class="toggler_liste_poudres">
	<div id="effect" class="ui-widget-content ui-corner-all">
		<h3 class="ui-widget-header ui-corner-all">Liste bột đã nhập :</h3>
		<p id="contenu_du_toggler">
			{% if latest_list %}<ol>
				{% for p in latest_list %} 
					<li id="details"><h5 Href="javascript: showdetails('{{p.nom}}')">{{ p.nom}}</h5>
					</li>
				{% endfor %}</ol>
			{% else %}
				<p>No polls are available.</p>
			{% endif %}
			<table style="width: 100%; padding: 5px;"  class="tabcenter">
				<thead class="ui-widget-header" id="tab_agenda">
				</thead>
				<tbody>
			</table>
		</p>
	</div>
</div>

<div class="toggler_create_poudre">
	<div id="effect" class="ui-widget-content ui-corner-all">
		<h3 class="ui-widget-header ui-corner-all">Tạo bột mới :</h3>
		<p id="contenu_du_toggler">
			<form action="/poudres/create" method="post">
				<div>
					<label for="nom">Tên bột :</label>
					<input type="text" id="nom" />
					<label for="codeP">Mã bột :</label>
					<input type="code" id="codeP" />
				</div>
				<div>
					<label for="dateP">Ngày tạo :</label>
					<input type="text" id="datepicker" />
					<div class="button">
						<button type="submit"> Tạo bột</button>
					</div>
				</div>
			</form>
		</p>
	</div>
</div>
{% endblock %}